let {form,$,layer} = layui;
import Manage from "./manage.js";
export default class Login{
    constructor(){
        this.render();
        this.handle();
    }
    render(){
        let template = `
        <style>
            .card{
                width: 600px;
                margin:auto;
            }
        </style>
        <div class="layui-card card">
        <div class="layui-card-header">登录</div>
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input
                            type="text"
                            name="username"
                            required
                            lay-verify="required|username"
                            placeholder="请输入标题"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input
                            type="password"
                            name="pwd"
                            required
                            lay-verify="required"
                            placeholder="请输入密码"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                </div>
             
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button
                            class="layui-btn"
                            lay-submit
                            lay-filter="loginForm"
                        >
                            立即提交
                        </button>
                        <button
                            type="reset"
                            class="layui-btn layui-btn-primary"
                        >
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
        `;
        $("#root").html(template);
    }
    handle(){
        form.verify({
            username:function(value,item){
                let msg = "";
                if(!/^\w{6,20}$/.test(value)){
                    return "用户名格式不正确";
                }
               
                return msg;
            }
        });
        form.on('submit(loginForm)',function(data){
            $.ajax({
                type:"post",
                url:"/users/login",
                data:data.field,
                success(res){
                    if(res.status == 1){
                        location.href = "#manage";
                        layer.msg("登录成功");
                    }else{
                        layer.msg("登录失败");
                    }
                }
            });
            return false;
        });
    }
}